<template>
  <el-menu
    router
    active-text-color="#ffd04b"
    text-color="#fff"
    default-active="admin"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#fd715d"
  >
    <h2 class="mb-2" style="color: #fff; text-align: center; font-size: 20px">
      仿天猫购物商城系统
    </h2>

    <!-- 首页 -->
    <el-menu-item index="admin" :route="{ name: 'admin' }">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <!-- 商品管理 -->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Goods /></el-icon>
        <span>商品</span>
      </template>
      <el-menu-item index="productlist" :route="{ name: 'productlist' }">商品列表</el-menu-item>
      <el-menu-item index="productadd" :route="{ name: 'productadd' }">添加商品</el-menu-item>
    </el-sub-menu>

    <!-- 订单管理 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Wallet /></el-icon>
        <span>订单</span>
      </template>
      <el-menu-item index="orderlist" :route="{ name: 'orderlist' }">订单列表</el-menu-item>
    </el-sub-menu>

    <!-- 用户管理 -->
    <el-menu-item index="userlist" :route="{ name: 'userlist' }">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { House, Goods, Wallet, User } from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 98%;
  border: none;
}
</style>
